﻿@model IEnumerable<DemoAjaxQuery.Models.Category>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.ActionLink(item.Name, "ProductsInCat", new { id = item.Id })
        </td>
        <td>
            @Ajax.ActionLink(
                "Products",
                "ProductsInCat",
                new { id = item.Id },
                new AjaxOptions { UpdateTargetId = "products-view" }) |
            @Html.ActionLink(
                "Products Data",
                "ProductsInCatData",
                new { id = item.Id },
                new { @class = "json-link" }) |
            <a href="/api/Pro/@item.Id" class="json-link" >
                Web API
            </a>
        </td>
    </tr>
}

</table>

<div id="products-view">
</div>

<ol id="products-list">
</ol>

@section scripts {
    <script>
        $(function () {
            $("a.json-link").click(function (evt) {
                evt.preventDefault();
                evt.stopPropagation();

                var alink = $(this);
                var href = alink.attr("href");
                var list = $("#products-list");
                list.html("");
                $.getJSON(href, null, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $("<li/>").text(data[i].Name).appendTo(list);
                    }
                });
            });
        });
    </script>
}